<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="style.css" rel="stylesheet" />
		<script src="zepto.js"></script>
	</head>
	<body>
		<input type="file" accept="images/*">
		<input class="url" type="url" placeholder="url">
		<div class="container"></div>
		<button class="submit">Submit</button>
	</body>
	<script>
		$('input[type=file]').change(function(){
		    var file=this.files[0];
		    var reader = new FileReader;
		    reader.onload = function(){
		    	var url = reader.result;
		    	setImageURL(url);
		    };
		    reader.readerAsDataURL(file);
		});
		var image = new Image();
		function setImageURL(url){
			image.src(url);
		}
		var x,y,width,height;
		var canvas = $('<canvas width="'+ width +'" height="'+ height +'"></canvas>')[0],
		ctx = canvas.getContext('2d');
		ctx.drawImage(image,x,y,width,height,0,0,width,height);
		$(document.body).append(canvas)
		var data=canvas.toDataURL();

		// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
		data=data.split(',')[1];
		data=window.atob(data);
		var ia = new Uint8Array(data.length);
		for (var i = 0; i < data.length; i++) {
		    ia[i] = data.charCodeAt(i);
		};
		
		// canvas.toDataURL 返回的默认格式就是 image/png
		var blob=new Blob([ia], {type:"image/png"});
		
		var fd=new FormData();

		fd.append('file',blob);
		$.ajax({
		    url:"your.server.com",
		    type:"POST",
		    data:fd,
		    success:function(){}
		});
	</script>
</html>
